<template>
  <div class="moments-detail-pages">
    <cp-nav-bar title="详情" left-arrow></cp-nav-bar>
    <MonentsCard
      v-if="detailData && detailData.image_urls.length > 1"
      :data="detailData"
      @like-click="triggerLikeClick"
    ></MonentsCard>
    <MonentsCardSimple
      v-else-if="detailData"
      :data="detailData"
      @like-click="triggerLikeClick"
    ></MonentsCardSimple>
    <div class="like_members" v-if="likeMember.length > 0">
      <cp-icon name="find-like" style="width: 25px; height: 25px; margin-right: 10px"></cp-icon>
      <template v-for="item in likeMember" :key="item.user_id">
        <van-image
          :src="item.avatar"
          width="35px"
          height="35px"
          radius="3px"
          style="margin-right: 10px; margin-bottom: 10px"
        ></van-image>
      </template>
    </div>
    <div class="post-comment" v-if="momentData.length > 0">
      <cp-icon
        name="find-comments"
        style="width: 25px; height: 25px; margin-right: 10px; margin-top: 10px"
      ></cp-icon>
      <div class="post-comment-content">
        <template v-for="item in momentData" :key="item">
          <div class="post-comment-content-item">
            <van-image
              :src="item?.avatar"
              radius="3px"
              width="35px"
              height="35px"
              style="margin-right: 6px"
            ></van-image>
            <div class="post-comment-content-item-right">
              <div class="post-comment-content-item-name">{{ item.username }}</div>
              <div class="post-comment-content-item-content">{{ item.content }}</div>
            </div>
            <div class="post-comment-content-item-time">{{ formatTime(item.created_at) }}</div>
          </div></template
        >
      </div>
    </div>
    <div class="message-input" :class="isShowEmoji ? 'message-input-active' : 'message-input'">
      <input
        type="text"
        v-model="newMessage"
        placeholder="请输入内容"
        @keyup.enter="sendMessage"
        enterkeyhint="send"
      />

      <van-icon name="smile-o" size="24" style="margin-right: 10px" @click="showEmojiAction" />
    </div>
    <div class="emoji-content" :class="isShowEmoji ? 'emoji-content-active' : 'emoji-content'">
      <Picker
        :data="emojiIndex"
        set="twitter"
        @select="showEmoji"
        :showPreview="false"
        :showSkinTones="false"
        emojiTooltip
        :showSearch="false"
        :i18n="i18n"
        style="width: 100%; height: 100%"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'

import MonentsCard from '../components/Monents-card.vue'
import MonentsCardSimple from '../components/Monents-card-simple.vue'
import { nextTick, ref } from 'vue'
import {
  createPostMoment,
  getPostDetail,
  getPostLikeMemberData,
  getPostMomentData
} from '@/services/monents'
import data from 'emoji-mart-vue-fast/data/all.json'
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
import { showToast } from 'vant'
import { formatTime } from '@/utils/format'
const emojiIndex = new EmojiIndex(data)
const newMessage = ref<string>('')
const isShowEmoji = ref(false)
const messageList = ref<HTMLElement | null>(null)
const scrollToBottom = (): void => {
  nextTick(() => {
    if (messageList.value) {
      messageList.value.scrollTop = messageList.value.scrollHeight
    }
  })
}
//展示表情包面板
const showEmojiAction = () => {
  isShowEmoji.value = !isShowEmoji.value
  nextTick(() => {
    scrollToBottom() // 表情面板展开或收起时，滚动到底部
  })
}
const i18n = {
  search: '搜索',
  notfound: '未找到表情',
  categories: {
    search: '搜索结果',
    recent: '常用表情',
    smileys: '笑脸与表情',
    people: '人物与身体',
    nature: '动物与自然',
    foods: '食物与饮料',
    activity: '活动',
    places: '旅行与地点',
    objects: '物品',
    symbols: '符号',
    flags: '旗帜',
    custom: '自定义'
  }
}
const showEmoji = (emoji: { native: string }) => {
  newMessage.value += emoji.native
}

const sendMessage = async () => {
  await createPostMoment(Number(route.params.id), newMessage.value)
  showToast('成功发表评论！')
  getMomentsData()
  newMessage.value = ''
}

type monentsType = {
  author_avatar: string
  author_name: string
  content: string
  created_at: string
  image_urls: string[]
  is_liked: boolean
  post_id: number
  user_id: string
}
type LikeMemberType = {
  // 根据实际数据结构定义类型
  user_id: number
  username: string
  avatar: string
}
const route = useRoute()
const detailData = ref<monentsType>()
const likeMember = ref<LikeMemberType[]>([])
const getDetailData = async () => {
  if (route.params.id) {
    const res = await getPostDetail(Number(route.params.id))
    detailData.value = res.data as monentsType
  }
}
getDetailData()
const getLikeMbData = async () => {
  const res = await getPostLikeMemberData(Number(route.params.id))
  likeMember.value = res.data as LikeMemberType[]
}
getLikeMbData()
const triggerLikeClick = (e: boolean) => {
  if (detailData.value) {
    detailData.value.is_liked = e
  }
}
type momentDataType = {
  avatar: string
  comment_id: number
  username: string
  content: string
  created_at: string
  user_id: number
  post_id: number
}
const momentData = ref<momentDataType[]>([])
const getMomentsData = async () => {
  const res = await getPostMomentData(Number(route.params.id))
  momentData.value = res.data as momentDataType[]
}
getMomentsData()
</script>
<style lang="scss" scoped>
.moments-detail-pages {
  padding-top: 45px;
  box-sizing: border-box;
  height: 100vh;
  background-color: var(--bg-primary);
}
.like_members {
  background-color: var(--detail-bg-primary);
  padding-top: 10px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  flex-wrap: wrap;
}
.message-input {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: var(--chat-input-bg);
  border-top: 1px solid #ddd;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0px;
  transition: bottom 0.3s ease-in-out;
}
.message-list-active {
  height: calc(100vh - 390px);
}
.message-input-active {
  bottom: 250px;
}
.emoji-content {
  width: 100%;
  height: 0px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  transition: height 0.3s ease-in-out;
}
.emoji-content-active {
  height: 250px;
}
.message-input input {
  width: 275px;
  padding: 10px 15px;
  border: none;
  border-radius: 20px;
  margin: 0 10px;
  outline: none;
  font-size: 16px;
}

.img-file-content {
  height: 100%;
  width: 100%;
  background: #fff;
}
.img-file-box {
  padding: 20px;
  .img-icon {
    font-size: 55px;
  }
  .img-text {
    width: 55px;
    text-align: center;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
  }
}
.post-comment {
  background-color: var(--detail-bg-primary);
  padding-left: 15px;
  display: flex;
  align-items: flex-start;
  &-content {
    flex: 1;
    height: auto;
    &-item {
      width: 100%;
      height: 66px;
      display: flex;
      align-items: flex-start;
      justify-content: start;
      padding-right: 11px;
      box-sizing: border-box;
      padding-top: 10px;
      &-right {
        flex: 1;
      }
      &-name {
        color: rgba(110, 117, 157, 1);
        text-align: left;
        line-height: 23.17px;
        font-size: 16px;
      }
      &-content {
        line-height: 20.27px;
        color: var(--cp-contact-color);
        text-align: left;
        font-size: 14px;
      }
      &-time {
        color: rgba(102, 102, 102, 1);
        font-size: 12px;
        line-height: 17.38px;
        margin-top: 7px;
      }
    }
  }
}
</style>
